<template>
  <div style="width: 100%; height: 100%" class="position-relative">
    <index-header style="top: 0; z-index: 2" />
    <div class="topStyle">
      <div
        :style="{ height: height + 'px' }"
        :class="[index == key ? 'active' : '']"
        @click="change(key,item.code)"
        v-for="(item, key) in expertsList"
        :key="key"
      >
        <img :src="item.image" />
        <div>
          <p>{{ item.text }}</p>
          <p>
            <span>{{ item.num }}</span
            >个
          </p>
        </div>
      </div>
    </div>
    <!-- <el-carousel :interval="1000000000" type="card" style="margin-top:80px;margin:auto;width:95%" height="500px">
    <el-carousel-item v-for="item in 20" :key="item">
      <div class="medium">{{ item }}</div>
    </el-carousel-item>
  </el-carousel> -->
    <div class="theArrow">
      <img class="swiper-button-prev" slot="button-prev" src="../../../assets/img/lbleft.png" /><img
        class="swiper-button-next"
        slot="button-next"
        src="../../../assets/img/lbright.png"
      />
    </div>
    <div class="swiper-content">
      <div class="topimg">
        <img src="../../../assets/img/lbtop.png" />
      </div>

      <swiper ref="mySwiper" :options="swiperOption" v-if="list.length>0" class="show-swiper">
        <template v-for="(item, index) in list">
          <swiper-slide :key="index">
            <div class="swiper-item">
              <div>
                <img :src="nowImg + item.picture" />
                <div>
                  <p>{{item.name}}</p>
                  <p>单位：{{item.company}}</p>
                  <p>电话：{{item.phone}}</p>
                  <p>邮箱：{{item.email}}</p>
                </div>
              </div>
              <div>
                <p>简介</p>
                <span
                  >{{item.introduction}}</span
                >
              </div>
            </div>
          </swiper-slide>
        </template>
      </swiper>
      <div class="topimg">
        <img src="../../../assets/img/lbbottom.png" />
      </div>
    </div>
  </div>
</template>

<script>
const height = parseInt(((window.document.body.clientWidth * 0.95) / 7) * 0.6)
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
// import YlCharts from '@/components/Charts/ylCharts.vue'
// import IndexHeader from '../component/IndexHeader2.vue'
import { businessData, getInformation, classificationExpert} from '@/api/connector'
// import Swiper from 'swiper'
export default {
  name: 'ExpertSystem',
  //   components: {
  //     // eslint-disable-next-line vue/no-unused-components
  //     YlCharts,
  //     IndexHeader
  //   },
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      list: [],
      swiperOption: {
        // 设置slider容器能够同时显示的slides数量，默认为1， 'auto'则自动根据slides的宽度来设定数量
        slidesPerView: 'auto',
        // loop:true,
        // loopedSlides: 3,
        // 	loopAdditionalSlides: 0,
        // 	//一个屏幕展示的数量
        // 	slidesPerView: 3,
        // autoplay:{
        //   delay: 1000, //自动切换的时间间隔，单位ms
        //   stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
        //   stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。
        //   disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
        //   reverseDirection: true, //开启反向自动轮播。
        //   waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
        // },
        // spaceBetween: 30,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        /*
         * 开启这个参数来计算每个slide的progress(进度、进程)
         * 对于slide的progress属性，活动的那个为0，其他的依次减1
         */
        watchSlidesProgress: true,
        // 默认active slide居左，设置为true后居中
        centeredSlides: true,
        // 当你创建一个Swiper实例时是否立即初始化，这里我们手动初始化
        init: false,
        on: {
          progress: function () {
            for (let i = 0; i < this.slides.length; i++) {
              const slide = this.slides.eq(i) // 指定匹配元素集缩减值
              const slideProgress = this.slides[i].progress // 当前元素集的progress值

              let modify = 0 // 偏移权重
              if (parseInt(Math.abs(slideProgress)) > 0) {
                modify = Math.abs(slideProgress) * 0.2 // 不一定要0.2，可自行调整
              }
              const translate = slideProgress * modify * 400 + 'px' // 500是swiper-slide的宽度
              const scale = 1 - Math.abs(slideProgress) / 10 // 缩放权重值，随着progress由中向两边依次递减，可自行调整
              const zIndex = 99 - Math.abs(Math.round(10 * slideProgress))
              slide.transform(`translateX(${translate}) scale(${scale})`)
              slide.css('zIndex', zIndex)
              slide.css('opacity', 1) // 是否可见
              if (parseInt(Math.abs(slideProgress)) > 4) {
                // 设置了只有选中的元素以及他两遍的显示，其他隐藏
                slide.css('opacity', 0)
              }
            }
          }
        }
      },
      height: height,
      expertsList: [
        {
          text: '良品培育',
          num: '',
          image: require('../../../assets/img/lxdp/lppy.png')
        },
        {
          text: '高效繁育',
          num: '',
          image: require('../../../assets/img/lxdp/gxfy.png')
        },
        {
          text: '饲料营养',
          num: '',
          image: require('../../../assets/img/lxdp/clyy.png')
        },
        {
          text: '健康养殖',
          num: '',
          image: require('../../../assets/img/lxdp/jkyz.png')
        },
        {
          text: '智慧管理',
          num: '',
          image: require('../../../assets/img/lxdp/zhgl.png')
        },
        {
          text: '疫病防治',
          num: '',
          image: require('../../../assets/img/lxdp/ybfz.png')
        },
        {
          text: '乳品加工',
          num: '',
          image: require('../../../assets/img/lxdp/rpjg.png')
        }
      ],
      index: 0,
      nowImg:process.env.VUE_APP_BASE_API
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted() {
    console.log(process.env.VUE_APP_BASE_API,777)
    classificationExpert().then((res)=>{
        if(res.status == 0){
          let numList = res.data.rows
          numList.map((item,index)=>{
            this.expertsList[index].num = item.count 
            this.expertsList[index]['code'] = item.code
          })
        }
    })
    window.onresize = () => {
      // return (()=>{
      // this.$nextTick(()=>{
      let height = parseInt(((window.document.body.clientWidth * 0.95) / 7) * 0.6)
      this.height = height
      //   })
      // })
    }
    this.tabExperts()
  },
  methods: {
    tabExperts(code = 'EXPERT_TYPE_CULTIVATION') {
        getInformation(code).then((res)=>{
        if(res.status == 0){
          this.list = res.data.rows
          this.initSwiper()
        }
    })
    },
    initSwiper() {
      this.$nextTick(async () => {
        await this.swiper.init() // 现在才初始化
        await this.swiper.slideTo(parseInt(this.list.length / 2))
      })
    },
    change(e,code) {
      this.tabExperts(code)
      this.index = e
      
    },
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    }
  }
}
</script>
<style lang="scss" scope>
.theArrow {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 300px;
  > img {
    width: 28px;
    height: 28px;
    z-index: 10;
    margin-right: 56px;
    &:first-child {
      margin-left: 26px;
    }
  }
}
.swiper-content {
  z-index: 1;
  width: 95%;
  height: 70%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  // padding: 50px 0;
  .topimg {
    > img {
      width: 100%;
    }
    width: 50px;
    margin: auto;
  }
  .show-swiper {
    padding: 5px 0;
    width: 100%;
    height: 75%;
    top: 0;
    left: 0;

    .swiper-slide {
      width: 473px;
      // 表示所有属性都有动作效果，过度时间为0.4s，以慢速开始和结束的过渡效果
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      .swiper-item {
        background-image: url('../../../assets/img/litterttea.png');
        background-size: 100% 100% !important;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        font-size: 14px;
        color: #fff;
        > div {
          padding: 15px 0 0 15px;
          padding-bottom: 0;
          &:first-child {
            display: flex;
            justify-content: space-around;
            > div {
              width: 50%;
              margin-left: 22px;
              > p {
                line-height: 2;
                &:first-child {
                  background-image: -webkit-linear-gradient(bottom, #84b9dc 28%, #ffffff 0%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  font-family: myfont;
                  font-size: 20px;
                  color: #fff;
                  padding-top: 15px;
                }
                font-size: 16px;
                color: #d9dbde;
              }
            }
            > img {
              width: 46%;
              height: 236px;
            }
          }
          &:last-child {
            // padding:15px;
            padding: 30px 15px 0;
            color: #d9dbde;
            > p {
              margin-bottom: 8px;
              font-size: 14px;
            }
            > span {          
              font-size: 14px;
              line-height: 1.8;
            }
          }
        }
      }
    }
  }
}
.swiper-slide-active {
  .swiper-item {
    background-image: url('../../../assets/img/techers.png') !important;
    box-shadow: 0px 0px 5px 5px #133c59;
  }
}
.topStyle {
  padding-top: 10px;
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
  > div {
    width: 14.2%;
    border: 1px solid #2e5675;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    img {
      // position: relative;
      width: 34px;
      height: 34px;
    }
    > div {
      // position: relative;
      margin-left: 10px;
      color: #e9f7ff;
      > p {
        font-size: 14px;
        &:last-child {
          padding-top: 6px;
          > span {
            background-image: -webkit-linear-gradient(top, #ffffff, #3cb5ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 32px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
.active {
  background-color: rgba(109, 200, 255, 0.1);
  box-sizing: border-box;
  // border:1px red solid!important;
  border-image: linear-gradient(90deg, rgba(60, 181, 255, 0), rgba(60, 181, 255, 1), rgba(60, 181, 255, 0)) 5 10 !important;
}
</style>
